<script setup lang="ts">
// import 'vue3-video-play/dist/style.css'
// import { videoPlay } from 'vue-video-play'
// curl -X POST -u admin:ducai -d '{"request":"list"}' http://localhost:7088/janus/plugins/rtmp
import videojs from 'video.js'
import Player from 'video.js/dist/types/player';
import 'video.js/dist/video-js.css'
defineProps<{ msg: string }>()
import { nextTick, onBeforeUnmount, onMounted, reactive, ref,} from 'vue';
const src = "/app/user/llhls.m3u8" //视频源
const videoPlayer = ref(null)
const player = ref<Player>()
 
onMounted(() => {
  // videojs.Vhs.xhr.beforeRequest = function (options) {
  //     options.headers = { token: 'xxx' };
  //     return options;
  //   };
  player.value = videojs(videoPlayer.value,{sources: [
        {
          src: src,
          type: 'application/x-mpegURL', // HLS MIME 类型
          autoplay:true
        },
      ],})
      
})
 
onBeforeUnmount(() => {
  if (videoPlayer.value) {
    videoPlayer.value.dispose()
  }
})
</script>

<template>
 <video ref="videoPlayer" data-setup='{"autoplay": true}' class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
    </video>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
